1. Open Zoom developer account https://zoom.us/signin

2. go to Develop drop down (third option from top right) and select Build App option

3. select 'JWT' app type

4. generate APP KEY & APP SECRET

1. installation

                  npm install @zoomus/websdk --save
                

2. add to angular.json

                  ...
'options': {
   ...
   'assets': [
      ...
      {
         'glob': '**/*',
         'input': './node_modules/@zoomus/websdk/dist/lib/',
         'output': './node_modules/@zoomus/websdk/dist/lib/'
      }
   ],
   'styles': [
      'node_modules/@zoomus/websdk/dist/css/bootstrap.css',
      'node_modules/@zoomus/websdk/dist/css/react-select.css',
      ...
   ],
   'scripts': [
   ],
   'allowedCommonJsDependencies': [
      '@zoomus/websdk'
   ]
},

1. Import the Web Meeting SDK at the top of the desired component file:

                  import { Component, OnInit,Inject } from '@angular/core';
                  import ZoomMtgEmbedded from '@zoomus/websdk/embedded';
                  import { DOCUMENT } from '@angular/common';
                

2. Define the Meeting / Webinar settings and Web Meeting SDK credentials variables:

                zoomData={apiKey:'',meetingNumber:'',leaveUrl:'',userName:'',userEmail:'',passWord:'', role:1};
                client = ZoomMtgEmbedded.createClient();


                  constructor(
                   
                       public httpClient: HttpClient, @/Inject(DOCUMENT) document
                  ) { }

                  ngOnInit(): void {

                          let meetingSDKElement = document.getElementById('meetingSDKElement');
                          this.client.init({
                                debug: true,
                                zoomAppRoot: meetingSDKElement,
                                language: 'en-US',
                                customize: {
                                  meetingInfo: ['topic', 'host', 'mn', 'pwd', 'telPwd', 'invite', 'participant', 'dc', 'enctype'],
                                  toolbar: {
                                    buttons: [
                                      {
                                        text: 'Custom Button',
                                        className: 'CustomButton',
                                        onClick: () => {
                                          console.log('custom button');
                                        }
                                      }
                                    ]
                                  }
                                }
                          });

                          this.getZoomDetails(1);

                  }    
                  
                  
                  getZoomDetails(id){
                        this.appointmentService.getZoomDetails(this.detailsId)
                        .subscribe(data => 
                            {        
                              this.zoomData=data.data;           
                              document.getElementById("overlay").style.display = "none";
                              
                              
                            });
                      }



       

3. Generate the Web Meeting SDK Signature (API request to Signature Server):

       getSignature() {
            
            document.getElementById("meetingSDKElement").style.display = "block";
            document.getElementById("btn-starting").style.display = "none";
            document.getElementById("btn-ending").style.display = "block";
          
            const token = this.jwtService.getToken();
          
            this.httpClient.post(`${environment.api_url}`+'webinar/zoom/signature', {
              meetingNumber: this.zoomData.meetingNumber,
              role: this.zoomData.role,
              webinarId:this.detailsId
            },
            {
              headers: {          
                'Authorization' : `Bearer ${token}`
              }
            }).toPromise().then((data: any) => {
              if(data.signature) {
                console.log(data.signature)
                this.startMeeting(data.signature)
              } else {
                console.log(data)
              }
            }).catch((error) => {
              console.log(error)
            })
          }





startMeeting(signature) {

        this.client.join({
          apiKey: this.zoomData.apiKey,
          signature: signature,
          meetingNumber: this.zoomData.meetingNumber,
          password: this.zoomData.passWord,
          userName: this.zoomData.userName,
          userEmail: this.zoomData.userEmail
        });



}




endMeeting(){


        Swal.fire({  
          title: 'Are you sure want to leave the meeting',  
          text: '',  
          icon: 'warning',  
          showCancelButton: true,  
          confirmButtonText: 'Yes',  
          cancelButtonText: 'No, keep it'  
        }).then((result) => {  
            if (result.value) {  
                
                  
                  document.getElementById("meetingSDKElement").style.display = "none";
                  document.getElementById("btn-starting").style.display = "block";
                  document.getElementById("btn-ending").style.display = "none";

              

            } else if (result.dismiss === Swal.DismissReason.cancel) {  
            
            }  
        })



}
       

4. In view

            <button  id="btn-ending" class="btn btn-grid-top btn-sm" (click)="endMeeting()" style="background-color:#c73508;color:#fff;display:none;float:left" ><i class="fa fa-plus-circle"></i>&nbsp;  End Meeting</button>
            <button   id="btn-starting" class="btn btn-grid-top btn-sm " (click)="getSignature()" style="background-color:#265925;color:#fff;float:left" ><i class="fa fa-plus-circle"></i>&nbsp;  Start Meeting</button>
      

      <div style="position:fixed !important;top:100px !important;right:0px !important;z-index:999999999" >
        <div id="meetingSDKElement"  >          
          <!-- Zoom Meeting SDK Component View Rendered Here -->
        </div>
      </div>

1. getZoomDetails()

                  //appointmentId  
                  public function zoomDetails(Request $request,$id){
                      $input = $request->all(); 
                      $appointment=Appointment::find($id);
                      $doctor=Doctor::find($appointment->doctor_id);
                      $zoomData=json_decode($appointment->zoom_details);
                      $data=['apiKey'=>$doctor->zoom_api_key,
                           'meetingNumber'=>$zoomData->id,
                            'leaveUrl'=>'',
                             'userName'=>$appointment->first_name,
                              'userEmail'=>'', 
                              'passWord'=>$zoomData->password,
                              'role'=>1];
                      
                      return response()->json(['status' => 'success','data'=>$data],
                      200); 
                  }

                

2. getSignature()

                  //appointmentId
                  //meetingNumber
                  //role
                 public function signature(Request $request) {
                      $input = $request->all();

                      $appointment=Appointment::find($input['appointmentId']);
                      $doctor=Doctor::find($appointment->doctor_id);

                      $meeting_number=$input['meetingNumber'];
                      $api_key=$doctor->zoom_api_key;
                      $api_secret=$doctor->zoom_api_secret;
                      $role=$input['role'];
                      
                      $time = time() * 1000 - 30000;//time in milliseconds (or close enough)
                
                      $data = base64_encode($api_key . $meeting_number . $time . $role);
                      
                      $hash = hash_hmac('sha256', $data, $api_secret, true);
                      
                      $_sig = $api_key . "." . $meeting_number . "." . $time . "." . $role . "." . base64_encode($hash);

                      $signature=rtrim(strtr(base64_encode($_sig), '+/', '-_'), '=');

                      return response()->json(['status' => 'success','signature'=>$signature],
                      200);
                  }